<template>
  <el-row class="panel-group">
    <el-col :xs="12" :sm="12" :lg="{span: '4-8'}"
            class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
        <div class="card-panel-description">
          <div class="card-panel-text">
            认证次数
          </div>
        </div>
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="renzhengcishu" class-name="card-panel-icon" />
          <CountTo :start-val="0" :end-val="countData.authCount" :duration="2600"
                   class="card-panel-num" />{{ authCountNum }}
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="{span: '4-8'}"
            class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('messages')">
        <div class="card-panel-description">
          <div class="card-panel-text">
            今日认证次数
          </div>
        </div>
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="jinrirenzhengcishu" class-name="card-panel-icon" />
          <CountTo :start-val="0" :end-val="countData.authTodayCount" :duration="3000"
                   class="card-panel-num" />{{ authTodayCountNum }}
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="{span: '4-8'}"
            class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('purchases')">
        <div class="card-panel-description">
          <div class="card-panel-text">
            锁定账号
          </div>
        </div>
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="suodingzhanghao" class-name="card-panel-icon" />
          <CountTo :start-val="0" :end-val="countData.lockAccountCount" :duration="3200"
                   class="card-panel-num" />个
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="{span: '4-8'}"
            class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
        <div class="card-panel-description">
          <div class="card-panel-text">
            今日锁定账号
          </div>
        </div>
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="jinrisuodingzhanghao" class-name="card-panel-icon" />
          <CountTo :start-val="0" :end-val="countData.lockAccountTodayCount" :duration="3600"
                   class="card-panel-num" />个
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="{span: '4-8'}"
            class="card-panel-col">
      <div class="card-panel" style="border-right:none" @click="handleSetLineChartData('shoppings')">
        <div class="card-panel-description">
          <div class="card-panel-text">
            单点应用
          </div>
        </div>
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="dandianyingyong" class-name="card-panel-icon" />
          <CountTo :start-val="0" :end-val="countData.singleAuthApp" :duration="3600"
                   class="card-panel-num" />个
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import CountTo from 'vue-count-to'
import { overviewCount } from '@/framework/api/authenticationCenter/index'

export default {
  components: {
    CountTo
  },
  data() {
    return {
      countData: {
        authCount: 0,
        authTodayCount: 0,
        lockAccountCount: 0,
        lockAccountTodayCount: 0,
        singleAuthApp: 0
      },
      authCountNum: '',
      authTodayCountNum: ''
    }
  },
  created() {
    this.getCountByUser()
  },
  methods: {
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    },
    getCountByUser() {
      overviewCount().then((response) => {
        this.countData = response.data
        if (this.countData.authCount / 10000 > 1) {
          this.countData.authCount = this.countData.authCount / 10000
          this.authCountNum = '万次'
        } else {
          this.authCountNum = '次'
        }
        if (this.countData.authTodayCount / 10000 > 1) {
          this.countData.authTodayCount = this.countData.authTodayCount / 10000
          this.authTodayCountNum = '万次'
        } else {
          this.authTodayCountNum = '次'
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  padding: 16px 0;
  border-top: 1px solid #F2F3F5;
  border-bottom: 1px solid #F2F3F5;

  .card-panel-col {
    // margin-bottom: 32px;
    padding: 0!important;
  }

  .card-panel {
    height: 60px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    border-right: 1px solid #F2F3F5;
    font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
    margin-left:40%;
    .card-panel-description {
      width: 100%;
      display: flex;
      .card-panel-text {
        font-size: 12px;
        font-weight: 400;
        font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
        color: #131414;
        line-height: 20px;
        margin-bottom: 8px;
      }
    }
    .card-panel-icon-wrapper {
      display: flex;
      align-items: center;
      .card-panel-num {
        font-size: 26px;
        font-weight: 500;
        line-height: 24px;
        color: #1D2129;
        margin-left: 8px;
      }
    }

    .card-panel-icon {
      font-size: 32px;
    }

  }
}
.el-col-lg-4-8 {
		width: 20%;
	}
@media (max-width:1024px) {
 .panel-group .card-panel {
    display: block;
    height: 120px;
  }
  .panel-group .card-panel .card-panel-icon-wrapper{
 width: 100%;
  }
  .card-panel-description {
  margin: 0!important;
  }
.panel-group .card-panel-col{
  width: 33%!important;
  text-align: center;
}
.panel-group .card-panel .card-panel-icon-wrapper{
    width: 100%!important;
}
  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
